<template>
    <div>
        <app-search>
            <el-form :model="order" :label-position="$store.labelPosition" label-width="30%"  >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="业务员：" >
                            {{order.sellName}}
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单号：" >
                            {{order.orderNo}}
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户：" >
                            {{order.custName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人：" >
                            {{order.contactName}}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="接单日期：" >
                            {{order.orderDt}}
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="要求出货日期：" >
                            {{order.requireOutDt}}
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="总价：" >
                            {{order.totalAmountStr}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开票公司：" >
                            {{order.rcptCmpDescr}}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="付款日期：" >
                            {{order.payDt}}
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单状态：" >
                            <el-tag type="danger" v-if="order.status == 0">{{order.statusDescr}}</el-tag>
                            <el-tag type="warning" v-if="order.status == 1">{{order.statusDescr}}</el-tag>
                            <el-tag type="success" v-if="order.status == 2">{{order.statusDescr}}</el-tag>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="最晚收款日期：" >
                            {{order.finalDt}}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：" label-width="15%">
                            {{order.remark}}
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row >
                    <el-col :span="24">
                        <el-form-item label-width="15%">
                            <el-button type="edit" icon="el-icon-plus" v-if="!isView"
                                       @click="showAddPayment()">添加收款</el-button>
                            <el-button type="danger" icon="el-icon-delete" v-if="!isView"
                                       @click="deletePayments()">删除收款</el-button>

                            <el-button type="primary" icon="el-icon-back" @click="cancel()">
                                返回
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </app-search>

        <el-table :data="paymentList" @selection-change="handleSelectionChange"
                  stripe border style="width:100%">
            <el-table-column type="selection" min-width="2%"
                             align="center" v-if="!isView"></el-table-column>
            <el-table-column label="付款金额" prop="paidAmountStr" min-width="20%"
                             align="center"></el-table-column>
            <el-table-column label="付款日期" prop="paidDt" min-width="20%"
                             align="center"></el-table-column>

            <el-table-column label="操作" align="center" min-width="18%" >
                <template slot-scope="scope">
                    <el-button type="edit" size="small" icon="el-icon-edit" v-if="!isView"
                               @click="showEditPayment(scope.row)" >编辑</el-button>

                </template>
            </el-table-column>
        </el-table>

        <template v-if="!isView">
            <payment-edit @reload="initPage"></payment-edit>
        </template>

    </div>

</template>

<script>
    import PaymentEdit from './payment_edit';
    import { mapState } from 'vuex';

    export default {
        name: "PaymentList",
        components: {PaymentEdit},
        data() {

            return {
                order: {},

                tableData: {
                    loading: true,
                    body: []
                },
            }
        },
        mounted() {
            this.initPage()
        },

        methods: {
            // 获取订单数据
            async initPage() {
                console.log("orderId=", this.orderId);
                let res = await this.$axios.get(`/finance/payment/${this.orderId}`);
                console.log("返回订单信息：", res);
                this.order = res.result.order;
                this.tableData.loading = false;
                this.$store.commit("payment/Set_Payment_List", res.result.paymentList);
            },

            handleSelectionChange(val) {
                console.log("选中的元素: ", val); // val 中是所有选中的元素的值
                this.$store.commit("payment/Set_Selected_Payment", val);

            },

            showAddPayment(){
                this.$store.commit("payment/Show_Add_Payment")
            },

            deletePayments(){
                if(this.selectedPayments.length === 0){
                    this.$myMsg.warning("请选择要删除的付款项")
                    return;
                }

                this.$confirm('确实要删除选中的付款项吗？', '确认信息', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                .then(() => {
                    this.actualDeletePayments();
                })
                .catch(action => {
                    this.$myMsg.info('已放弃删除选中的付款项。');
                });
            },

            async actualDeletePayments(){
                let paymentIds = [];
                for(let payment of this.selectedPayments){
                    paymentIds.push(payment.id)
                }

                await this.$axios.delete('/finance/payment', paymentIds);
                this.$myMsg.success('删除成功');
                //this.$store.dispatch("payment/removePayments");
                this.initPage()
            },

            cancel(){
                this.$store.commit("payment/Set_Show_Payment_List", false);
            },

            showEditPayment(payment) {
                this.$store.commit("payment/Show_Edit_Payment", payment)
            },

        },

        computed: {
            ...mapState({
                paymentList: state => state.payment.paymentList,
                orderId: state => state.payment.orderId,
                selectedPayments: state => state.payment.selectedPayments,
                isView: state => state.payment.isView,
            }),
        }
    }
</script>

